<template>
  <main class="main">

    <div style="width: 6.1rem; height: 100%; display: flex; align-items: center;">
      <div class="logobox">
        <img class="logo" src="../../../assets/home/HomeLogo.png" >

        <div class='linkbutton'>
          <router-link to='/clogin'>
            <div style="width: 2.0rem; height: 0.5rem; background-color: black; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center;">
              <p style="font-size: 0.2rem; color: white; user-select: none;">Customer login</p>
            </div>
          </router-link>
        
          <router-link to='/login'>
            <div style="width: 2.0rem; height: 0.5rem; background-color: black; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center;">
              <p style="font-size: 0.2rem; color: white; user-select: none;">Employee login</p>
            </div>
          </router-link>
        </div>
      
      </div>
    </div>

    <!-- <router-link to='/clogin'> -->
      <!-- <div style="width:50%; height:99%; display:inline-block; background-color: rgb(255 0 0 / 0%);"  ></div> -->
    <!-- </router-link> -->
    <!-- <router-link to='/login'> -->
      <!-- <div style="width:50%; height:99%; display:inline-block; background-color: rgb(0 255 0 / 0%);" ></div> -->
    <!-- </router-link> -->
  </main>
</template>

<script>
export default {
  name: "HomeIndex",
  data() {
    return{
    };
  },
  methods:{
    setRem() {
      // console.log('setRem');
      let docEl = document.documentElement;
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) {
        return;
      }
      docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
      let fs = document.documentElement.style.fontSize;
      let fsn = fs.replace('px','');
      if (fsn > 100) {
        docEl.style.fontSize = '100px';
      }
    },
    // flushCom:function(){
      //router是路由实例,例如:var router = new Router({})
      //router.go(n)是路由的一个方法，意思是在history记录中前进或者后退多少步，0就表示还是当前，类似window.history.go(n)
      // this.$router.go(0);
    // },
    recalc() {
      // console.log('recalc');
      this.setRem();
    },
    orientationchange(doc, win) {
      // console.log('orientationchange');
      this.setRem();
      let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      if (!doc.addEventListener)
      return;
      win.addEventListener(resizeEvt, this.recalc, false);
    },
  },
  mounted(){
    this.orientationchange(document, window);
  },
}
</script>

<style>
.main{
  height: 100vh;
  margin: 0px;
  background: url(../../../assets/home/HomeBackground.png) no-repeat fixed center;
  background-size: cover;
}
.logobox{
  width: 6.1rem;
  position: relative;
  top: -0.5rem;
  left: 1.9rem;
}
.logo{
  /* 610*417 */
  width: 6.1rem;
  pointer-events: none;
}
.linkbutton{
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: absolute;
  top: 3rem;
}
</style>